import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Button,
  Tag,
  Modal,
  Form,
  message,
  Table,
  Radio,
  Input,
  Icon,
  Drawer,
  Row,
  Col,
  Switch,
  Progress, DatePicker, Select, Alert,Badge,
  Menu, Dropdown,
} from 'antd';
import MyPagination from '@/components/MyPagination';
import Loading from '@/components/Loading';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import GridLayout from 'react-grid-layout';
import find from 'lodash/find';
import ReactDataGrid from 'react-data-grid';
import debounce from 'lodash/debounce';
import { ellipsis, afterCloseModal, DescriptionItem, download, formateObjToParamStr } from '@/utils/utils';
import BuildModalTitle from '@/components/BuildModalTitle';
import mail from './../../images/mail.png';
import mailOpen from './../../images/mail-open.png';
import liuliangji from './../../images/liuliangji.png';
import liebiao from './../../images/liebiao.png';
import xiangmu from './../../images/xiangmu.png';
import AddOrEditMeter from './addOrEditUser';
import AlarmSetting from './AlarmSetting';
import ValveData from './ValveData';
import ValveData2 from './ValveData2';
import ValveData3 from './ValveData3';
import ValveData4 from './ValveData4';
import ValveData5 from './ValveData5';
import ValveData6 from './ValveData6';
import ValveData8 from './ValveData8';
import ValveData9 from './ValveData9';
import ValveData35 from './ValveData35';
import ValveData36 from './ValveData36';
import ValveData10 from './ValveData10';
import ValveData11 from './ValveData11';
import ValveData12 from './ValveData12';
import ValveData19 from './ValveData19';
import ValveData29 from './ValveData29';
import ValveData13 from './ValveData13';
import ValveData14 from './ValveData14';
import ValveData16 from './ValveData16';
import ValveData15 from './ValveData15';
import ValveData20 from './ValveData20';
import ValveData21 from './ValveData21';
import ValveData23 from './ValveData23';
import ValveData24 from './ValveData24';
import ValveData41 from './ValveData41';
import ValveData25 from './ValveData25';
import ValveData26 from './ValveData26';
import ValveData27 from './ValveData27';
// import ValveData40 from './ValveData40';
import ValveData40 from './ValveData40-2';
import ValveData42 from './ValveData42';
import ValveData43 from './ValveData43';
import ValveData45 from './ValveData45';
import ValveData44 from './ValveData44';
import WHSetUploadtime from './WHSetUploadtime';
import WHAlarm from './WHAlarm';
import WHCollection from './WHCollection';

import styles from './index.less';
import gold_groud from './../../images/valve_small.png';
import shuizhi from './../../images/shuizhi.png';
import dcjlq from './../../images/dcjlq.jpg';
import gold_groud2 from './../../images/valve2_small.jpg';
import DN800SNLD from './../../images/DN800SNLD.jpg';
import DN800unknow from './../../images/DN800unknow.jpg';
import unknow from './../../images/unknow.png';
import LDE from './../../images/LDE.jpg';
import shuiweiji from './../../images/shuiweiji.png';
import DN300sf from './../../images/DN300sf.jpg';
import temp11 from './../../images/temp11.png';
import temp12 from './../../images/temp12.png';
import temp26 from './../../images/temp26.png';
import temp13 from './../../images/temp13.jpg';
import temp14 from './../../images/temp14.jpg';
import temp24 from './../../images/temp24.jpg';
import temp25 from './../../images/temp25.jpg';
import temp21 from './../../images/temp21.jpg';
import request from '@/utils/request';
import config from '@/config/config';
import EditDMA from "@/pages/Meters/JoinDMA";
import sortBy from "lodash/sortBy";

const FormItem = Form.Item;
const { confirm } = Modal;
const { Option } = Select;

const RadioButton = Radio.Button;

const RadioGroup = Radio.Group;

function getFromLS(key) {
  let ls = {};
  try {
    ls = JSON.parse(localStorage.getItem('rgl-10')) || {};
  } catch (e) {
    /*Ignore*/
  }
  return ls[key];
}

function saveToLS(key, value) {

  localStorage.setItem(
    'rgl-10',
    JSON.stringify({
      [key]: value,
    }),
  );
};

@connect(({ valve_flowmeter_site, loading, global }) => ({
  valve_flowmeter_site,
  global,
  loading: loading.models.valve_flowmeter_site,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      showAddBtn: find(this.permissions, { name: 'device_add_and_edit' }),
      showdelBtn: find(this.permissions, { name: 'device_delete' }),
      showPasswordBtn: find(this.permissions, { name: 'user_default_password_edit' }),
      user_password_reset: find(this.permissions, { name: 'user_password_reset' }),
      visible: false,
      done: false,
      page: 1,
      per_page: 30,
      username: '',
      editRecord: {},
      selectedRowKeys: [],
      layout: [],
      granularity:'0'
    };
  }


  componentDidMount() {

    const { dispatch } = this.props;
    const {
      valve_flowmeter_site: { pageLoaded, scrollData,showType },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    const table = showType==='list'?document.querySelector('.react-grid-Canvas'):document.querySelector('.img-data-content');
    if (pageLoaded) {
      setTimeout(() => {
        table.scrollTop = scrollData.y;
        table.scrollLeft = scrollData.x;
      }, 0);
      const {
        valve_flowmeter_site: { data ,searchParams},
        global: { gridTableW },
      } = this.props;
      let layout = [];
      let localLayout = localStorage.getItem(`${searchParams.template}rgl-10`) ? JSON.parse(localStorage.getItem(`${searchParams.template}rgl-10`)) : [];
      for (let i = 0; i < data.length; i++) {
        const exit = find(localLayout, (o) => {
          return o.i === data[i].name;
        });
        if (exit) {
          layout.push(exit);
        } else {
          layout.push({ 'w': 2, 'h': 3, 'x': (i * 2) % 12, 'y': 0, 'i': data[i].name, minH: 3 });
        }
      }
      this.setState({
        layout: layout,
      });

    } else {
      const {
        valve_flowmeter_site: { searchParams },
      } = this.props;
      console.log('searchParams', searchParams);
      dispatch({
        type: 'valve_flowmeter_site/fetch',
        payload: searchParams,
        callback: () => {
          const { dispatch } = this.props;
          dispatch({
            type: 'valve_flowmeter_site/changeLoaded',
          });
          dispatch({
            type: 'valve_flowmeter_site/changeTableY',
          });
          const {
            valve_flowmeter_site: { data },
            global: { gridTableW },
          } = this.props;
          let layout = [];
          let localLayout = localStorage.getItem(`${searchParams.template}rgl-10`) ? JSON.parse(localStorage.getItem(`${searchParams.template}rgl-10`)) : [];
          for (let i = 0; i < data.length; i++) {
            const exit = find(localLayout, (o) => {
              return o.i === data[i].name;
            });
            if (exit) {
              layout.push(exit);
            } else {
              layout.push({ 'w': 2, 'h': 3, 'x': (i * 2) % 12, 'y': 0, 'i': data[i].name, minH: 3 });
            }
          }
          this.setState({
            layout: layout,
          });
        },
      });

    }
    window.addEventListener('resize', this.resize);
    table.addEventListener('scroll', debounce(this.scroll, 150));
    this.changeCustomH();
  }

  scroll = (e) => {
    console.log('scroll');
    const { dispatch } = this.props;
    dispatch({
      type: 'valve_flowmeter_site/changeScroll',
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  resize = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'valve_flowmeter_site/changeTableY',
    });
  };


  componentWillUnmount() {
    const {
      valve_flowmeter_site: { pageLoaded, scrollData,showType },
    } = this.props;

    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
    const table = showType==='list'?document.querySelector('.react-grid-Canvas'):document.querySelector('.img-data-content');
    table.removeEventListener('scroll', debounce(this.scroll, 300));
  }

  handleSearch = (values, cb) => {
    console.log('handleSearch', values);
    const that = this;
    const { dispatch } = this.props;
    const {
      valve_flowmeter_site: { searchParams },
    } = this.props;
    dispatch({
      type: 'valve_flowmeter_site/fetch',
      payload: {
        ...values,
      },
      callback() {
        console.log('handleSearch callback');
        if (cb) cb();
        const {
          valve_flowmeter_site: { data },
          global: { gridTableW },
        } = that.props;
        let layout = [];
        let localLayout = localStorage.getItem(`${searchParams.template}rgl-10`) ? JSON.parse(localStorage.getItem(`${searchParams.template}rgl-10`)) : [];
        for (let i = 0; i < data.length; i++) {
          const exit = find(localLayout, (o) => {
            return o.i === data[i].name;
          });
          if (exit) {
            layout.push(exit);
          } else {
            layout.push({ 'w': 2, 'h': 3, 'x': (i * 2) % 12, 'y': 0, 'i': data[i].name, minH: 3 });
          }
        }
        that.setState({
          layout: layout,
        });
      },
    });
  };
  downloadHistory=(start,end,id)=>{
    if(moment(start).diff(moment(end),'day')<-10){
      console.log('日期跨度不能超过10天')
      message.error('日期跨度不能超过10天')
      return false
    }
    this.setState({
      exportModal:true,
      start,end,id
    })
  }
  handleExportModal=()=>{
    const that = this;
    that.props.dispatch({
      type: 'global/changeButtonLoading',
      payload:true
    })
    const {id,start,end,granularity} = this.state
    const searchParams={granularity:granularity,workstation_id:id,start_date:moment(start).format('YYYY-MM-DD'),end_date:moment(end).format('YYYY-MM-DD')}
    download(`${config.prefix}/workstation_historical_data_files?Authorization=Bearer ${sessionStorage.getItem('token')}&order_direction=desc&${formateObjToParamStr(searchParams)}`)
    setTimeout(function (){
      that.props.dispatch({
        type: 'global/changeButtonLoading',
        payload:false
      })
    },5000)
  }
  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      valve_flowmeter_site: { searchParams },
    } = this.props;
    const that=this
    return (
      <Form layout="inline" className="search-form">
        <FormItem  style={{paddingLeft:'6px'}} >
          {getFieldDecorator('area', {
            initialValue: searchParams.area,
          })(
            <Radio.Group buttonStyle="solid"
                         onChange={(e) => {
                           const {
                             valve_flowmeter_site: { searchParams },
                           } = that.props;
                           that.props.dispatch({
                             type: 'valve_flowmeter_site/changeOneState',
                             payload: {
                               searchParams: {
                                 ...searchParams,
                                 area:e.target.value
                               },
                             },
                             callback: () => {
                               const {
                                 valve_flowmeter_site: { searchParams },
                               } = that.props;
                               that.handleSearch({
                                 page: 1,
                                 ...searchParams,
                               });
                             },
                           });
                         }}
            >
              <Radio.Button value="">全部地区</Radio.Button>
              <Radio.Button value="老城区">老城区</Radio.Button>
              <Radio.Button value="港城区">港城区</Radio.Button>
              <Radio.Button value="示范区">示范区</Radio.Button>
              <Radio.Button value="塔尔郎水厂">塔尔郎水厂</Radio.Button>
              <Radio.Button value="七泉湖水厂">七泉湖水厂</Radio.Button>
              <Radio.Button value="示范区水厂">示范区水厂</Radio.Button>
              <Radio.Button value="老城区水厂">老城区水厂</Radio.Button>
              <Radio.Button value="园艺场沉砂池">园艺场沉砂池</Radio.Button>
              <Radio.Button value="亚尔镇供水站">亚尔镇供水站</Radio.Button>
              <Radio.Button value="艾丁湖供水站">艾丁湖供水站</Radio.Button>
              <Radio.Button value="恰乡供水站">恰乡供水站</Radio.Button>
              <Radio.Button value="火焰山供水站">火焰山供水站</Radio.Button>
              <Radio.Button value="葡萄镇供水站">葡萄镇供水站</Radio.Button>
              <Radio.Button value="胜金乡供水站">胜金乡供水站</Radio.Button>
              <Radio.Button value="三堡乡供水站">三堡乡供水站</Radio.Button>
              <Radio.Button value="污水井液位">污水井液位</Radio.Button>
            </Radio.Group>
          )}
        </FormItem>
        <br/>
          <FormItem label="站点名称" style={{paddingLeft:'10px'}}>
            {getFieldDecorator('name', {
              initialValue: searchParams.name,
            })(<Input style={{ width: '150px' }} placeholder="请输入" onKeyPress={this.keyPress}/>)}
          </FormItem>

        <FormItem>
          <Button
            type="primary"
            icon='search'
            onClick={() => {
              const { form } = this.props;
              form.validateFields((err, fieldsValue) => {
                if (err) return;

                this.handleSearch({
                  page: 1,
                  per_page: searchParams.per_page,
                  template: searchParams.template,
                  ...fieldsValue,
                });

              });
            }}
          >
            查询
          </Button>
          <Button style={{ marginLeft: 8 }} icon='redo' onClick={this.handleFormReset}>
            重置
          </Button>
        </FormItem>
        <FormItem label="" style={{paddingLeft:'10px'}}>
          {getFieldDecorator('alarm', {
            initialValue: searchParams.alarm,
          })(
            <Radio.Group buttonStyle="solid"
                         onChange={(e) => {
                           const {
                             valve_flowmeter_site: { searchParams },
                           } = that.props;
                           that.props.dispatch({
                             type: 'valve_flowmeter_site/changeOneState',
                             payload: {
                               searchParams: {
                                 ...searchParams,
                                 alarm:e.target.value
                               },
                             },
                             callback: () => {
                               const {
                                 valve_flowmeter_site: { searchParams },
                               } = that.props;
                               that.handleSearch({
                                 page: 1,
                                 ...searchParams,
                               });
                             },
                           });
                         }}
            >
              <Radio.Button value="">全部</Radio.Button>
              <Radio.Button value="1">报警</Radio.Button>
              <Radio.Button value="0">正常</Radio.Button>
            </Radio.Group>)}
        </FormItem>
        <FormItem label="" style={{paddingLeft:'10px'}}>
          {getFieldDecorator('online_status', {
            initialValue: searchParams.online_status,
          })(
            <Radio.Group buttonStyle="solid"
                         onChange={(e) => {
                           const {
                             valve_flowmeter_site: { searchParams },
                           } = that.props;
                           that.props.dispatch({
                             type: 'valve_flowmeter_site/changeOneState',
                             payload: {
                               searchParams: {
                                 ...searchParams,
                                 online_status:e.target.value
                               },
                             },
                             callback: () => {
                               const {
                                 valve_flowmeter_site: { searchParams },
                               } = that.props;
                               that.handleSearch({
                                 page: 1,
                                 ...searchParams,
                               });
                             },
                           });
                         }}
            >
              <Radio.Button value="">全部</Radio.Button>
              <Radio.Button value="-1">离线</Radio.Button>
              <Radio.Button value="1">在线</Radio.Button>
            </Radio.Group>)}
        </FormItem>
      </Form>
    );
  }

  keyPress = (e) => {
    let theEvent = e || window.event;
    let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code === 13) {
      e.preventDefault();
      console.log('key press');
      const {
        valve_flowmeter_site: { searchParams },
      } = this.props;
      const { form } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;

        this.handleSearch({
          page: 1,
          per_page: searchParams.per_page,
          ...fieldsValue,
        });

      });
    }
  };
  handleUploadWHAlarm=()=>{
    const that = this;
    const formValues = this.WHAlarmFormRef.props.form.getFieldsValue();
    request(`/workstations/${this.state.editRecord.id}/wh/set_pressure_alarm`, {
      method: 'POST',
      data: {
        ...formValues
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('设置成功')
        that.setState({
          WHAlarmModal:false
        })
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      }
    });
  };
  handleUploadWHCollection=()=>{
    const that = this;
    const formValues = this.WHCollectionFormRef.props.form.getFieldsValue();
    request(`/workstations/${this.state.editRecord.id}/wh/set_collection_interval`, {
      method: 'POST',
      data: {
        ...formValues
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('设置成功')
        that.setState({
          WHCollectionModal:false
        })
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      }
    });
  };
  handleUploadTime=()=>{
    const formValues = this.WHSetUploadtimeFormRef.props.form.getFieldsValue();
    const state = this.WHSetUploadtimeFormRef.state
    console.log('formValues', formValues);
    const that = this;
    if(formValues.type===''){
      message.error('请选择类型')
      return;
    }
    let itemsKey = []
    for (let i in formValues) {
      let splitKey = i.split('-')
      let len = splitKey.length;
      if (len >= 2) {
        if (itemsKey.indexOf(splitKey[1]) < 0) {
          itemsKey.push(splitKey[1])
        }
      }
    }
    if (itemsKey.length > 24) {
      message.error('时间个数不能超过24')
      return
    }
    const metersArr = []
    for (let i = 0; i < itemsKey.length; i++) {
      if (formValues[`time-${itemsKey[i]}`]) {
        const useMantissa = formValues[`useMantissa-${itemsKey[i]}`]
        let time = moment(formValues[`time-${itemsKey[i]}`])
        console.log('time', time.format('HH:mm'))
        metersArr.push({
          hour: Number(time.format('HH')),
          minute: Number(time.format('mm')),
          "useMantissa": useMantissa
        })
      }

    }
    console.log('metersArr',metersArr)
    request(`/workstations/${this.state.editRecord.id}/wh/set_upload_time`, {
      method: 'POST',
      data: {
        type:formValues.type,
        hours_of_day:metersArr
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('设置成功')
        that.setState({
          whuploadtimeModal:false
        })
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      }
    });
  }
  handleAddDMA=()=>{
    const that=this
    const formValues = this.editDMAFormRef.props.form.getFieldsValue();
    console.log('formValues', formValues);
    request(`/workstations/${this.state.editRecord.id}/join_area`, {
      method: 'PUT',
      data: {
        ...formValues,
        join_area:1
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success('工作站点参与DMA设置成功')
        that.setState({
          editDMAModal:false
        })
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      }
    });
  }
  handleAdd = () => {
    const location = this.findChildLocation();
    const config = JSON.parse(JSON.stringify(this.findChildConfig()));
    console.log('config', config);
    console.log('location', location);
    const formValues = this.AddForm.props.form.getFieldsValue();
    if (config.template !== 40){
      config.hardware_configs.device[0].upload_interval = config.hardware_configs.device[0].upload_interval * 60;
      config.hardware_configs.modbus = config.hardware_configs.modbus_03;
      if (config.hardware_configs.sensor) {
        for (let i = 0; i < config.hardware_configs.sensor.length; i++) {
          if (config.hardware_configs.sensor[i] && config.hardware_configs.sensor[i].type !== 0) {
            config.hardware_configs.sensor[i].over_cancel = config.hardware_configs.sensor[i].over;
            config.hardware_configs.sensor[i].under_cancel = config.hardware_configs.sensor[i].under;
          }

        }
      }
    }

    console.log('formValues', formValues);
    if (config.template === 1 || config.template === 3 || config.template === 4 || config.template === 5
      || config.template === 6 || config.template === 7 || config.template === 8 || config.template === 9
      || config.template === 10 || config.template === 11 || config.template === 12|| config.template === 13|| config.template === 14
      || config.template === 15 || config.template === 16 || config.template === 17 || config.template === 18|| config.template === 19
      || config.template === 20 || config.template === 21|| config.template === 22|| config.template === 23|| config.template === 25|| config.template === 27
      || config.template === 26
      || config.template === 35
      || config.template === 36
      || config.template === 29
    ) {
      formValues.type = 1;
      formValues.hardware_model = 'RTU-03';
      config.hardware_configs.flowmeter = [{}, {}];
      config.hardware_configs.flowmeter[0].enable = 0;
      config.hardware_configs.flowmeter[1].enable = 0;
    } else if(config.template === 24||config.template === 41||config.template === 44){
      formValues.type = 3;
      formValues.hardware_model = 'RTU-WH';
    }  else if(config.template === 42||config.template === 43||config.template === 45){
      formValues.type = 5;
      formValues.hardware_model = 'RTU-MK';
    }else if(config.template === 40){
      config.hardware_configs.protobuf_json.rtu03.sensor_cfg.range = config.hardware_configs.protobuf_json.rtu03.sensor_cfg.range * 1000;
      config.hardware_configs.protobuf_json.rtu03.sensor_cfg.wave = config.hardware_configs.protobuf_json.rtu03.sensor_cfg.wave * 1000;
      formValues.type = 4;
      formValues.hardware_model = 'RTU-03P';
    }else {
      formValues.type = 2;
      formValues.hardware_model = 'RTU-03';
    }
    console.log('config', config);
    let formData = new FormData();
    if(formValues.file){
      formData.append("cover_image", formValues.file.file);
    }
    config.hardware_configs.customize={
      ...config.hardware_configs.customize,
      area:formValues.area
    }
    formData.append("type", formValues.type);
    formData.append("company_id", sessionStorage.getItem('company_id'));
    formData.append("address", formValues.address);
    formData.append("area", formValues.area);
    formData.append("imei", formValues.imei);
    formData.append("sort", formValues.sort);
    formData.append("name", formValues.name);
    formData.append("hardware_model", formValues.hardware_model);
    formData.append("longitude", location[0]);
    formData.append("latitude", location[1]);
    formData.append("template", config.template);
    formData.append("hardware_configs",  JSON.stringify(config.hardware_configs));

    const that = this;
    this.props.dispatch({
      type: 'valve_flowmeter_site/add',
      payload: formData,
      callback() {
        message.success('添加站点成功');
        that.setState({
          addModal: false,
        });
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };


  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.handleSearch({
      name: '',
      page: 1,
      per_page: 30,
    });
  };
  saveConfig = () => {
    this.setState({
      editModal: false,
    });

    const {
      valve_flowmeter_site: { searchParams },
    } = this.props;
    this.handleSearch(searchParams);
  };
  handleEdit = () => {
    const config = JSON.parse(JSON.stringify(this.findChildConfig()));
    console.log('config', config);
    const formValues = this.EditForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const location = this.findChildLocation();
    console.log('location', location);
    if (config.template !== 40){
      config.hardware_configs.device[0].upload_interval = config.hardware_configs.device[0].upload_interval * 60;
      config.hardware_configs.modbus = config.hardware_configs.modbus_03;
      if (config.hardware_configs.sensor) {
        for (let i = 0; i < config.hardware_configs.sensor.length; i++) {
          if (config.hardware_configs.sensor[i] && config.hardware_configs.sensor[i].type !== 0) {
            config.hardware_configs.sensor[i].over_cancel = config.hardware_configs.sensor[i].over;
            config.hardware_configs.sensor[i].under_cancel = config.hardware_configs.sensor[i].under;
          }

        }
      }
    }
    // if(formValues.id==="325331766008623104"&&config.hardware_configs.modbus[1].target_pressure_value<0.2){
    //
    // }
    if (config.template === 1 || config.template === 3 || config.template === 4 || config.template === 5
      || config.template === 6 || config.template === 7 || config.template === 8 || config.template === 9
      || config.template === 10 || config.template === 11 || config.template === 12|| config.template === 13|| config.template === 14
      || config.template === 15 || config.template === 16 || config.template === 17 || config.template === 18|| config.template === 19
      || config.template === 20 || config.template === 21|| config.template === 22|| config.template === 23|| config.template === 25|| config.template === 27
      || config.template === 26  || config.template === 36  || config.template === 29) {
      formValues.type = 1;
      formValues.hardware_model = 'RTU-03';
      config.hardware_configs.flowmeter = [{}, {}];
      config.hardware_configs.flowmeter[0].enable = 0;
      config.hardware_configs.flowmeter[1].enable = 0;
    } else if(config.template === 24||config.template === 41||config.template === 44){
      formValues.type = 3;
      formValues.hardware_model = 'RTU-WH';
    }else if(config.template === 42||config.template === 43||config.template === 45){
      formValues.type = 5;
      formValues.hardware_model = 'RTU-MK';
    }  else if(config.template === 40){
      config.hardware_configs.protobuf_json.rtu03.sensor_cfg.range = config.hardware_configs.protobuf_json.rtu03.sensor_cfg.range * 1000;
      config.hardware_configs.protobuf_json.rtu03.sensor_cfg.wave = config.hardware_configs.protobuf_json.rtu03.sensor_cfg.wave * 1000;
      formValues.type = 4;
      formValues.hardware_model = 'RTU-03P';
    }else {
      formValues.type = 2;
      formValues.hardware_model = 'RTU-03';
    }

    console.log('config', config);
    let formData = new FormData();
    if(formValues.file){
      formData.append("cover_image", formValues.file.file);
    }
    formData.append("id",  this.state.editRecord.id);
    formData.append("type", formValues.type);
    formData.append("address", formValues.address);
    formData.append("company_id", sessionStorage.getItem('company_id'));
    formData.append("hardware_model", formValues.hardware_model);
    formData.append("area", formValues.area);
    formData.append("imei", formValues.imei);
    formData.append("sort", formValues.sort);
    formData.append("name", formValues.name);
    formData.append("longitude", location[0]);
    formData.append("latitude", location[1]);
    formData.append("template", config.template);
    formData.append("hardware_configs",  JSON.stringify(config.hardware_configs));
    const that = this;
    this.props.dispatch({
      type: `valve_flowmeter_site/edit`,
      payload: {
        formData:formData,
        id: this.state.editRecord.id,

      },
      callback() {
        message.success('修改站点成功');
        that.setState({
          editModal: false,
        });
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleDelete = id => {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: `valve_flowmeter_site/remove`,
      payload: { id },
      callback: () => {
        message.success('删除站点成功');
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleReboot = id => {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: `valve_flowmeter_site/reboot`,
      payload: { id },
      callback: () => {
        message.success('重启站点成功');
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  getConfigFunc = (cb) => {
    this.findChildConfig = cb;
  };
  findChildFunc = (cb) => {
    this.findChildLocation = cb;
  };
  handleEditAlarm = () => {
    const formValues = this.AlarmForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    if (formValues.administrators_arr) {
      formValues.administrators = formValues.administrators_arr.map((item, index) => {
        return { id: item };
      });
    }
    this.props.dispatch({
      type: `valve_flowmeter_site/editAlarm`,
      payload: {
        ...formValues,
        id: this.state.editRecord.id,
      },
      callback() {
        message.success('修改报警成功');
        that.setState({
          alarmModal: false,
        });
        const {
          valve_flowmeter_site: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  onLayoutChange = (layout) => {
    console.log('onLayoutChange', layout);
    if (layout.length === 0 || layout[0].h === 1) {
      return false;
    }
    const {
      valve_flowmeter_site: { searchParams },
    } = this.props;
    console.log('设置rgl-10');
    localStorage.setItem(
      `${searchParams.template}rgl-10`,
      JSON.stringify(layout),
    );
    this.setState({ layout }, function() {
      this.changeCustomH();
    });
  };
  changeCustomH = () => {
    this.setState({
      homeWidth: document.querySelector('.custom-card').offsetWidth - 220,
    });
  };

  render() {
    const that = this;
    const {
      valve_flowmeter_site: { data,showType, loading, tableY, meta, searchParams, selectedRowKeys },
      global: { gridTableW,button_loading },
    } = this.props;
    const username = sessionStorage.getItem('username');
    // console.log(this.state.layout);
    const defaultColumnProperties = {
      resizable: true,
    };
    const columns = [
      {
        name: '序号',
        width: 50,
        key: '_index',
        frozen:true,
        formatter: (event) => {
          const {
            valve_flowmeter_site: { meta },
          } = this.props;
          return <p className={'index'}>{((meta.current_page-1)*meta.per_page)+(event.value+1)}</p>
        }
      },
      {
        name: '站点名称',
        width: 140,
        frozen:true,
        key: 'name',
        formatter: (event) => {
          return <span title={event.value} style={{cursor:'pointer',color:'blue'}} onClick={()=>{
            this.setState({
              editRecord: event.row,
              dataModal: true,
              name: event.row,
            });
          }}>{event.value}</span>
        }
      },
      {
        name: '站点类型',
        width: 140,
          frozen:true,
        key: 'template',
        formatter: (event) => {
          let template = '未知';
          let item=event.row;
          if (item.template === 1) {
            template = '双蝶阀站点';
          } else if (item.template === 2) {
            template = '流量计站点';
          } else if (item.template === 3) {
            template = '水质检测站点';
          } else if (item.template === 41) {
            template = '水质检测站点(WH采集器)';
          }else if (item.template === 4) {
            template = '电磁计量器站点';
          } else if (item.template === 5) {
            template = 'DN800电磁流量计(SNLD-DN800)';
          } else if (item.template === 6) {
            template = 'DN800电磁流量计(未知)';
          } else if (item.template === 7) {
            template = 'LDE-DN400-400(珠华)';
          } else if (item.template === 8) {
            template = 'JEER雷达水位计';
          } else if (item.template === 9) {
            template = '双阀减压阀站点';
          } else if (item.template === 10) {
            template = '宋峰流量计';
          } else if (item.template === 11) {
            template = '电磁流量计&压力计';
          } else if (item.template === 12) {
            template = '双压力监测点';
          } else if (item.template === 19) {
            template = '双压力监测点(双阀调流阀)';
          }else if (item.template === 13) {
            template = '阀井液位站点';
          }else if (item.template === 14) {
            template = '园艺场沉砂池-水质液位';
          }else if (item.template === 15) {
            template = '老城区水厂-出水流量';
          }else if (item.template === 16) {
            template = '单液位站点-通道1';
          }else if (item.template === 17) {
            template = '老城区水厂-2#液位';
          }else if (item.template === 18) {
            template = '示范区水厂-液位';
          }else if (item.template === 20) {
            template = '单液位站点-通道2';
          }else if (item.template === 21) {
            template = '单压力监测点(带球阀)';
          }else if (item.template === 22) {
            template = '双压力监测点(量程0~8米)';
          }else if (item.template === 23) {
            template = '双压力液位监测点';
          }else if (item.template === 24) {
            template = '流量压力监测点(WH采集器)';
          }else if (item.template === 25) {
            template = '减压阀控制站点(带球阀)';
          }else if (item.template === 27) {
            template = '减压阀控制站点';
          }else if (item.template === 36) {
            template = '双压力监测点(双阀调流阀RLB)';
          }else if (item.template === 29) {
            template = '双压力双阀监测点(带调流阀)';
          }
          return <span title={template}  >{template}</span>
        }
      },
      {
        name: '在线状态',
        width: 100,
        key: 'status',
        formatter: (event) => {
          let item=event.row;
          let statusText = '';

          if (item.online_status === 1) {
            statusText = <p className={'table-success table-status' }>在线</p>;
          } else if (item.online_status === -1) {
            statusText =
              <p className={'table-error table-status'}>离线</p>;
          }
          return statusText
        }
      },
      {
        name: '是否报警',
        width: 100,
        key: 'alarm',
        formatter: (event) => {
          let item=event.row;
          let alarmText = '';
          if (item.alarm === 0) {
            alarmText = <p className={'table-success table-status' }>正常</p>;
          } else if (item.alarm === 1) {
            alarmText =
              <p className={'table-error table-status'}>报警</p>;
          }
          return alarmText
        }
      },

      {
        name: 'IMEI',
        key: 'imei',
        width: 140,
      },
      {
        name: 'IMSI',
        key: 'imsi',
        width: 140,
      },
      {
        name: '阀前压力',
        key: 'fqyl',
        width: 100,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===12||item.template===13){
            let sensor=item.workstation_data.sensor
            if(sensor.length>0){
              let color='',value='';
              switch (Number(sensor[0].parameters.status)) {
                case 0:
                  color='green';
                  value='正常';
                  break;
                case 1:
                  color='purple';
                  value='过压';
                  break;
                case 2:
                  color='orange';
                  value='欠压';
                  break;
                case 3:
                  color='red';
                  value='故障';
                  break;

              }
              return <div title={value}><Badge color={color} text={''} size={'large'}/>{sensor[0].parameters.value} Mpa</div>
            }else{return ''}
          }else if(item.template===9){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[0].parameters.pressure_valve_upstream_pressure_value}>
              {modbus[0].parameters.pressure_valve_upstream_pressure_value} MPa</div>
            }
          }else{
            return ''
          }
        }
      },
      {
        name: '阀后压力',
        key: 'fhyl',
        width: 100,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===12||item.template===13){
            let sensor=item.workstation_data.sensor
            if(sensor.length>0){
              let color='',value='';
              switch (Number(sensor[1].parameters.status)) {
                case 0:
                  color='green';
                  value='正常';
                  break;
                case 1:
                  color='purple';
                  value='过压';
                  break;
                case 2:
                  color='orange';
                  value='欠压';
                  break;
                case 3:
                  color='red';
                  value='故障';
                  break;

              }
              return <div title={value}><Badge color={color} text={''} size={'large'}/>{sensor[1].parameters.value} Mpa</div>
            }else{return ''}
          }else if(item.template===9){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[0].parameters.pressure_valve_upstream_pressure_value}>
              {modbus[0].parameters.pressure_valve_downstream_pressure_value} MPa</div>
            }
          }else{
            return ''
          }
        }
      },
      {
        name: '液位传感器',
        key: 'yecgq',
        width: 100,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===13||item.template===12){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){
              let color='',value='';
              switch (Number(modbus[item.template===12?0:1].parameters.alarm)) {
                case 0:
                  color='green';
                  value='正常';
                  break;

                case 1:
                  color='red';
                  value='报警';
                  break;

              }
              return <div title={value}><Badge color={color} text={''} size={'large'}/>{modbus[item.template===12?0:1].parameters.value} m</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '压力',
        key: 'yl',
        width: 100,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===11){
            let sensor=item.workstation_data.sensor
            if(sensor.length>0){
              let color='',value='';
              switch (Number(sensor[0].parameters.status)) {
                case 0:
                  color='green';
                  value='正常';
                  break;
                case 1:
                  color='purple';
                  value='过压';
                  break;
                case 2:
                  color='orange';
                  value='欠压';
                  break;
                case 3:
                  color='red';
                  value='故障';
                  break;

              }
              return <div title={value}><Badge color={color} text={''} size={'large'}/>{sensor[0].parameters.value} Mpa</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '瞬时流量',
        key: 'xsll',
        width: 100,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===11||item.template===10||item.template===5){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[0].parameters.instantaneous_flow} >{modbus[0].parameters.instantaneous_flow} m³/h</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '正累计流量',
        key: 'zljll',
        width: 120,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===11||item.template===10||item.template===5){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[0].parameters.positive_cumulative_flow} >{modbus[0].parameters.positive_cumulative_flow} m³</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '净累计流量',
        key: 'zljll2',
        width: 120,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===11||item.template===10||item.template===5){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[0].parameters.cumulative_flow} >{modbus[0].parameters.cumulative_flow} m³</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '进水瞬时流量',
        key: 'jsxsll',
        width: 100,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===4){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[0].parameters.instantaneous_flow} >{modbus[0].parameters.instantaneous_flow} m³/h</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '进水净累计流量',
        key: 'jsjljll',
        width: 120,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===4){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[0].parameters.cumulative_flow} >{modbus[0].parameters.cumulative_flow} m³</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '出水瞬时流量',
        key: 'csxsll',
        width: 100,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===4){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[1].parameters.instantaneous_flow} >{modbus[1].parameters.instantaneous_flow} m³/h</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '出水净累计流量',
        key: 'csjljll',
        width: 120,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===4){
            let modbus=item.workstation_data.modbus
            if(modbus.length>0){

              return <div title={modbus[1].parameters.cumulative_flow} >{modbus[1].parameters.cumulative_flow} m³</div>
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: 'PH值',
        key: 'ph',
        width: 80,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===3){
            let modbus=item.workstation_data.modbus
            let config_data=item.hardware_configs
            if(modbus.length>0){
              if (config_data.modbus[0].channel1_type == 1) {
                return modbus[0].parameters.measure_value1 + ` (${modbus[0].parameters.temperature1}℃)`;
              } else if (config_data.modbus[0].channel2_type == 1) {
                return modbus[0].parameters.measure_value2 + ` (${modbus[0].parameters.temperature2}℃)`;
              } else if (config_data.modbus[0].channel3_type == 1) {
                return modbus[0].parameters.measure_value3 + ` (${modbus[0].parameters.temperature3}℃)`;
              } else if (config_data.modbus[0].channel4_type == 1) {
                return modbus[0].parameters.measure_value4 + ` (${modbus[0].parameters.temperature4}℃)`;
              } else {
                return '';
              }
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '浊度',
        key: 'zd',
        width: 150,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===3){
            let modbus=item.workstation_data.modbus
            let config_data=item.hardware_configs
            if(modbus.length>0){
              if (config_data.modbus[0].channel1_type == 2) {
                return modbus[0].parameters.measure_value1 + ` NTU (${modbus[0].parameters.temperature1}℃)`;
              } else if (config_data.modbus[0].channel2_type == 2) {
                return modbus[0].parameters.measure_value2 + ` NTU (${modbus[0].parameters.temperature2}℃)`;
              } else if (config_data.modbus[0].channel3_type == 2) {
                return modbus[0].parameters.measure_value3 +  ` NTU (${modbus[0].parameters.temperature3}℃)`;
              } else if (config_data.modbus[0].channel4_type == 2) {
                return modbus[0].parameters.measure_value4 + ` NTU (${modbus[0].parameters.temperature4}℃)`;
              } else {
                return '';
              }
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '溶氧',
        key: 'ry',
        width: 150,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===3){
            let modbus=item.workstation_data.modbus
            let config_data=item.hardware_configs
            if(modbus.length>0){
              if (config_data.modbus[0].channel1_type == 3) {
                return modbus[0].parameters.measure_value1 + ` ppm (${modbus[0].parameters.temperature1}℃)`;
              } else if (config_data.modbus[0].channel2_type == 3) {
                return modbus[0].parameters.measure_value2 + ` ppm (${modbus[0].parameters.temperature2}℃)`;
              } else if (config_data.modbus[0].channel3_type == 3) {
                return modbus[0].parameters.measure_value3 +  ` ppm (${modbus[0].parameters.temperature3}℃)`;
              } else if (config_data.modbus[0].channel4_type == 3) {
                return modbus[0].parameters.measure_value4 + ` ppm (${modbus[0].parameters.temperature4}℃)`;
              } else {
                return '';
              }
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '电导率',
        key: 'ddl',
        width: 150,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===3){
            let modbus=item.workstation_data.modbus
            let config_data=item.hardware_configs
            if(modbus.length>0){
              if (config_data.modbus[0].channel1_type == 4) {
                return modbus[0].parameters.measure_value1 + ` μS/CM (${modbus[0].parameters.temperature1}℃)`;
              } else if (config_data.modbus[0].channel2_type == 4) {
                return modbus[0].parameters.measure_value2 + ` μS/CM (${modbus[0].parameters.temperature2}℃)`;
              } else if (config_data.modbus[0].channel3_type == 4) {
                return modbus[0].parameters.measure_value3 +  ` μS/CM (${modbus[0].parameters.temperature3}℃)`;
              } else if (config_data.modbus[0].channel4_type == 4) {
                return modbus[0].parameters.measure_value4 + ` μS/CM (${modbus[0].parameters.temperature4}℃)`;
              } else {
                return '';
              }
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '余氯',
        key: 'yl2',
        width: 150,
        formatter:(event)=>{
          let item=event.row;
          if(item.template===3){
            let modbus=item.workstation_data.modbus
            let config_data=item.hardware_configs
            if(modbus.length>0){
              if (config_data.modbus[0].channel1_type == 5) {
                return modbus[0].parameters.measure_value1 + ` ppm (${modbus[0].parameters.temperature1}℃)`;
              } else if (config_data.modbus[0].channel2_type == 5) {
                return modbus[0].parameters.measure_value2 + ` ppm (${modbus[0].parameters.temperature2}℃)`;
              } else if (config_data.modbus[0].channel3_type == 5) {
                return modbus[0].parameters.measure_value3 +  ` ppm (${modbus[0].parameters.temperature3}℃)`;
              } else if (config_data.modbus[0].channel4_type == 5) {
                return modbus[0].parameters.measure_value4 + ` ppm (${modbus[0].parameters.temperature4}℃)`;
              } else {
                return '';
              }
            }else{return ''}
          }else{
            return ''
          }
        }
      },
      {
        name: '操作',
        width: 380,
        key: 'right',
        classname:'operate',
        formatter: (event) => <Fragment>
          <Button
            className={'btn-cyan'}
            type="primary"
            icon="eye"
            size="small"
            onClick={(e) => {
              this.setState({
                editRecord: event.row,
                dataModal: true,
                name: event.row,
              });
            }
            }
          >数据
          </Button>
          {
            find(this.permissions, { name: "workstation_operation" }) &&
              <Fragment>

                <Button
                  type="primary"
                  size="small"
                  icon="edit"
                  onClick={(e) => {
                    this.setState({
                      editRecord: event.row,
                      editModal: true,
                    });
                  }
                  }
                >修改
                </Button>
                <Button
                  type="primary"
                  size="small"
                  icon="setting"
                  onClick={(e) => {
                    this.setState({
                      editRecord: event.row,
                      alarmModal: true,
                    });
                  }
                  }
                >报警配置
                </Button>
                <Button
                  type="danger"
                  size="small"
                  icon="delete"
                  onClick={(e) => {
                    confirm({
                      title: `确定要删除"${event.row.name}"吗?`,
                      content: '请谨慎操作！',
                      okText: '确定',
                      okType: 'danger',
                      cancelText: '取消',
                      centered:true,
                      maskClosable: true,
                      onOk() {
                        that.handleDelete(event.row.id);
                      },
                      onCancel() {
                        console.log('Cancel');
                      },
                    });
                  }
                  }
                >删除
                </Button>
              </Fragment>
          }



        </Fragment>,
      },
    ].map(c => ({  ...defaultColumnProperties,...c }));

    const renderMenu = (item) => (
      <Menu>
        {
          (item.template===24||item.template===41||item.template===44)&&
            <Menu.Item onClick={(e) => {
              that.setState({
                editRecord: item,
                whuploadtimeModal: true,
              });
            }}>
         <span>
             设置上传时间
          </span>
            </Menu.Item>
        }
        {
          (item.template===24||item.template===41||item.template===44)&&
          <Menu.Item onClick={(e) => {
          that.setState({
          editRecord: item,
            WHCollectionModal: true,
        });
        }}>
          <span>
          设置采集间隔
          </span>
          </Menu.Item>

        }
        {
          (item.template===24)&&
            <Menu.Item onClick={(e) => {
              that.setState({
                editRecord: item,
                WHAlarmModal: true,
              });
            }}>
         <span>
             设置压力报警
          </span>
            </Menu.Item>

        }
        <Menu.Item onClick={(e) => {
          that.setState({
            editRecord: item,
            alarmModal: true,
          });
        }}>
         <span>
             报警设置
          </span>
        </Menu.Item>
        <Menu.Item onClick={(e) => {
          this.setState({
            editRecord: item,
            editDMAModal: true,
          });
        }}>
         <span>
             DMA统计设置
          </span>
        </Menu.Item>
        {
          (username==='唐永臻'||username==='amwares')&&
          <Menu.Item onClick={(e) => {
            request(`/workstations/${item.id}/init_vertex_data`, {
              method: 'POST',
            }).then((response) => {
              if (response.status === 200) {
                message.success('刷新数据成功')
              }

            });
          }}>
         <span>
             刷新DMA数据
          </span>
          </Menu.Item>
        }
        {
          item.hardware_model==='RTU-03'&&
          <Menu.Item onClick={(e) => {
            confirm({
              title: `确定要重启‘${item.name}’吗?`,
              content: '请谨慎操作！',
              okText: '确定',
              okType: 'danger',
              cancelText: '取消',
              centered: true,
              maskClosable: true,
              onOk() {
                that.handleReboot(item.id);
              },
              onCancel() {
                console.log('Cancel');
              },
            });
          }}>
         <span>
             重启
          </span>
          </Menu.Item>
        }

        <Menu.Item onClick={(e) => {
          confirm({
            title: `确定要删除‘${item.name}’吗?`,
            content: '请谨慎操作！',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            centered: true,
            maskClosable: true,
            onOk() {
              that.handleDelete(item.id);
            },
            onCancel() {
              console.log('Cancel');
            },
          });
        }}>
         <span>
             删除
          </span>
        </Menu.Item>
      </Menu>
    );
    return <div className="custom-card">
      <div className="table-title"><span className={'title-item'}>水务监控站点</span>
      </div>

      <div className="table-page">
        <div style={{ display: 'flex'}}>
          <div style={{ width: '240px', height: 'auto', background: '#eeeeee', marginRight: '0' }}>
            {[{ id: '', name: '全部类型' },
              // { id: 1, name: '双蝶阀站点' },
              { id: 9, name: '双阀减压阀站点' },
              // { id: 2, name: '流量计站点' },
              { id: 3, name: '水质监测站点' },
              { id: 41, name: '水质监测站点(WH采集器)' },
              // { id: 44, name: '液位监测站点(WH采集器)' },
              { id: 4, name: '电磁计量器站点' },
              { id: 5, name: 'DN800电磁流量计(SNLD-DN800)' },
              // { id: 6, name: 'DN800电磁流量计(待定)' },
              // { id: 7, name: 'LDE-DN400-400(珠华)' },
              // { id: 8, name: 'JEER雷达水位计' },
              // { id: 10, name: '宋峰流量计' },
              { id: 11, name: '电磁流量计&压力计' },
              { id: 42, name: '流量液位站点(MK采集器)' },
              // { id: 43, name: '流量站点(MK采集器)' },
              { id: 45, name: '液位站点(MK采集器)' },
              // { id: 12, name: '双压力监测点' },
              // { id: 23, name: '双压力液位监测点' },
              { id: 26, name: '双压力监测点(RLB)' },
              { id: 19, name: '双压力监测点(双阀调流阀)' },
              // { id: 35, name: '双压力监测点(新双阀调流阀)' },
              { id: 36, name: '双压力监测点(新双阀调流阀RLB)' },
               // { id: 29, name: '双压力双阀监测点(带调流阀)' },
              // { id: 22, name: '双压力监测点(量程0~8米)' },
             // { id: 13, name: '阀井液位站点' },
              { id: 24, name: '流量压力监测点(WH采集器)' }
              // ,  { id: 25, name: '减压阀控制站点(带球阀)' }
              ,  { id: 27, name: '减压阀控制站点' }
              ,  { id: 40, name: '减压阀远程控制站点' }
            ].map((item, index) => {
              return <div onClick={() => {
                const {
                  valve_flowmeter_site: { searchParams },
                } = that.props;
                that.props.dispatch({
                  type: 'valve_flowmeter_site/changeOneState',
                  payload: {
                    searchParams: {
                      ...searchParams,
                      template: item.id,
                    },
                  },
                  callback: () => {
                    const {
                      valve_flowmeter_site: { searchParams },
                    } = that.props;
                    that.handleSearch({
                      page: 1,
                      ...searchParams,
                    });
                  },
                });
              }} key={index} className={searchParams.template === item.id ? styles.item_active : styles.item}
                          title={item.name}>{item.name}</div>;
            })}
          </div>
          <div style={{flex:'1',marginLeft:'10px'}}>
            <div className="table-searchWithInfo2">
              {this.renderSimpleForm()}
              <div className="table-info2">
                {
                  find(this.permissions, { name: 'workstation_operation' }) &&
                  <div className="table-info-item2" style={{ cursor: 'pointer' }} onClick={() => {
                    this.setState({
                      addModal: true,
                    });
                  }}>
                    <p><Icon type={'plus'}></Icon></p>
                    <p>添加站点</p>
                  </div>
                }

                <div className="table-info-item2">
                  <p>{meta.total}</p>
                  <p>站点数量</p>
                </div>
                {/*<div className="table-info-item3" style={{ cursor: 'pointer' }} onClick={()=>{
                  this.props.dispatch({
                    type: 'valve_flowmeter_site/changeOneState',
                    payload: {
                      showType:showType==='list'?'item':'list',
                    }
                  });
                }}>
                  <p><img style={{width:'28px',height:'24px',cursor:'pointer'}} src={showType==='list'?xiangmu:liebiao} /></p>
                  <p>切换显示</p>
                </div>*/}
              </div>
            </div>

            {showType==='list'?
            <div className={'table-data-content'}>
              <ReactDataGrid
                columns={columns}
                rowGetter={i => {return {...data[i],_index:i}}}
                rowsCount={data.length}
                minHeight={tableY}
                rowSelection={{
                  showCheckbox: false,
                  enableShiftSelect: true,
                  selectBy: {
                    indexes: selectedRowKeys,
                  },
                }}
                onRowClick={
                  (row) => {
                    if(!String(row)){
                      return
                    }
                    this.props.dispatch({
                      type: 'valve_flowmeter_site/changeSelectRow',
                      payload: [row],
                    });
                  }
                }

              />
            </div>:
            <div className={'img-data-content'}
                 style={{
                   width: '100%',
                   height: tableY + 'px',
                   maxHeight: tableY + 'px',
                   overflow: 'auto',
                   overflowX: 'hidden',
                 }}>
              {
                this.state.layout.length > 0 &&
                <Row gutter={16}>
                  {
                    data.map((item, index) => {
                      let borderTopColor = '#5e83bf';
                      switch (index % 4) {
                        case 0:
                          borderTopColor = '#e77338';
                          break;
                        case 1:
                          borderTopColor = '#5e83bf';
                          break;
                        case 2:
                          borderTopColor = '#31b77d';
                          break;
                        case 3:
                          borderTopColor = '#C790E1';
                          break;

                      }
                      let statusText = '';
                      if (item.online_status === 1) {
                        statusText = <span style={{ background: '#00b209',display:'block', padding: '4px 4px', color: '#fff' }}>在线</span>;
                      } else if (item.online_status === -1) {
                        statusText = <span style={{ background: 'red',display:'block', padding: '4px 4px', color: '#fff' }}>离线</span>;
                      }
                      let alarmText = '';
                      if (item.alarm === 0) {
                        alarmText = <span style={{ background: '#00b209',display:'block', padding: '4px 4px', color: '#fff' }}>正常</span>;
                      } else if (item.alarm === 1) {
                        alarmText =
                          <span className={styles.alarm} style={{ padding: '4px 4px',display:'block', color: '#fff' }}>报警</span>;
                      }
                      let template = '未知';
                      if (item.template === 1) {
                        template = '双蝶阀站点';
                      } else if (item.template === 2) {
                        template = '流量计站点';
                      } else if (item.template === 3) {
                        template = '水质检测站点';
                      } else if (item.template === 41) {
                        template = '水质检测站点(WH采集器)';
                      }else if (item.template === 42) {
                        template = '流量液位站点(MK采集器)';
                      }else if (item.template === 43) {
                        template = '流量站点(MK采集器)';
                      }else if (item.template === 45) {
                        template = '液位站点(MK采集器)';
                      }else if (item.template === 44) {
                        template = '液位监测站点(WH采集器)';
                      }else if (item.template === 4) {
                        template = '电磁计量器站点';
                      } else if (item.template === 5) {
                        template = 'DN800电磁流量计(SNLD-DN800)';
                      } else if (item.template === 6) {
                        template = 'DN800电磁流量计(未知)';
                      } else if (item.template === 7) {
                        template = 'LDE-DN400-400(珠华)';
                      } else if (item.template === 8) {
                        template = 'JEER雷达水位计';
                      } else if (item.template === 9) {
                        template = '双阀减压阀站点';
                      } else if (item.template === 10) {
                        template = '宋峰流量计';
                      } else if (item.template === 11) {
                        template = '电磁流量计&压力计';
                      } else if (item.template === 12) {
                        template = '双压力监测点';
                      } else if (item.template === 19) {
                        template = '双压力监测点(双阀调流阀)';
                      }else if (item.template === 13) {
                        template = '阀井液位站点';
                      }else if (item.template === 14) {
                        template = '园艺场沉砂池-水质液位';
                      }else if (item.template === 15) {
                        template = '老城区水厂-出水流量';
                      }else if (item.template === 16) {
                        template = '单液位站点-通道1';
                      }else if (item.template === 17) {
                        template = '老城区水厂-2#液位';
                      }else if (item.template === 18) {
                        template = '示范区水厂-液位';
                      }else if (item.template === 20) {
                        template = '单液位站点-通道2';
                      }else if (item.template === 21) {
                        template = '单压力监测点(带球阀)';
                      }else if (item.template === 22) {
                        template = '双压力监测点(量程0~8米)';
                      }else if (item.template === 23) {
                        template = '双压力液位监测点';
                      }else if (item.template === 24) {
                        template = '流量压力监测点(WH采集器)';
                      }else if (item.template === 25) {
                        template = '减压阀控制站点(带球阀)';
                      }else if (item.template === 27) {
                        template = '减压阀控制站点';
                      }else if (item.template === 26) {
                        template = '双压力监测点(RLB)';
                      }else if (item.template === 29) {
                        template = '双压力双阀监测点(带调流阀)';
                      }else if (item.template === 35) {
                        template = '双压力监测点(新双阀调流阀)';
                      }else if (item.template === 36) {
                        template = '双压力监测点(新双阀调流阀RLB)';
                      }else if (item.template === 40) {
                        template = '减压阀远程控制站点';
                      }

                      let locationImage = unknow;
                      if (item.template === 1) {
                        locationImage = gold_groud2;
                      } else if (item.template === 2) {
                        locationImage = liuliangji;
                      } else if (item.template === 3||item.template === 41) {
                        locationImage = shuizhi;
                      } else if (item.template === 4) {
                        locationImage = dcjlq;
                      } else if (item.template === 5) {
                        locationImage = DN800SNLD;
                      } else if (item.template === 6) {
                        locationImage = DN800unknow;
                      } else if (item.template === 7) {
                        locationImage = LDE;
                      } else if (item.template === 8) {
                        locationImage = shuiweiji;
                      } else if (item.template === 9) {
                        locationImage = gold_groud2;
                      } else if (item.template === 10) {
                        locationImage = DN300sf;
                      } else if (item.template === 11) {
                        locationImage = temp11;
                      } else if (item.template === 12||item.template === 19) {
                        locationImage = temp12;
                      }else if (item.template === 13) {
                        locationImage = temp13;
                      }else if (item.template === 14) {
                        locationImage = temp14;
                      }else if (item.template === 21) {
                        locationImage = temp21;
                      }else if (item.template === 24) {
                        locationImage = temp24;
                      }else if (item.template === 25) {
                        locationImage = temp25;
                      }else if (item.template === 26) {
                        locationImage = temp26;
                      }else if (item.template === 27) {
                        locationImage = temp25;
                      }
                      if(item.cover_image_path){
                        locationImage=item.cover_image_path
                      }

                      return <Col  xs={12} sm={8} md={6} lg={6} xl={6} xxl={4} key={item.name} >
                        <div className={styles.img_box} style={{ borderTopColor: borderTopColor,marginBottom:'16px' }}>
                          <div className={`${styles.card_type} card_type`}>
                            {template}
                          </div>
                          <img style={{ cursor: 'pointer' ,width:'100%',height:'140px'}} onClick={() => {
                            this.setState({
                              editRecord: item,
                              dataModal: true,
                              name: item.name,

                            });
                          }} src={locationImage}  alt=""/>
                          <h4 title= {item.name} style={{margin:'5px 0',fontSize:'16px'}}> {item.name}</h4>
                          <div style={{display:'flex'}}>
                            <h4 style={{flex:'1',marginBottom:'0'}}> {statusText}</h4>
                            <h4 style={{flex:'1',marginBottom:'0'}}> {alarmText}</h4>
                          </div>


                          <div className={styles.card_action}>
                            <div onClick={() => {
                              this.setState({
                                editRecord: item,
                                dataModal: true,
                                name: item.name,
                              });
                            }}>数据
                            </div>
                            {
                              find(that.permissions, { name: 'workstation_operation' }) &&
                              <Fragment>
                                <div onClick={() => {
                                  that.setState({
                                    editRecord: item,
                                    editModal: true,
                                  });
                                }}>修改
                                </div>
                                <Dropdown overlay={renderMenu(item)}>
                                  <div>更多</div>
                                </Dropdown>
                              </Fragment>

                            }

                          </div>
                        </div>
                      </Col>;
                    })
                  }
                </Row>

              }

            </div>}


            {
              loading && <Loading/>
            }
          </div>

        </div>


      </div>
      <div className="table-pagination">
        <MyPagination searchCondition={{ ...searchParams }} meta={meta} handleSearch={this.handleSearch}/>
      </div>
      <Drawer
        title={`添加站点`}
        placement="right"
        destroyOnClose
        onClose={() => {
          this.setState({
            addModal: false,
            editRecord: {},
          });
        }}
        width={700}
        keyboard={false}
        visible={this.state.addModal}
      >
        <AddOrEditMeter
          onClose={() => {
            this.setState({
              addModal: false,
              editRecord: {},
            });
          }}
          getConfigFunc={this.getConfigFunc}
          findChildFunc={this.findChildFunc}
          onSave={this.handleAdd}
          wrappedComponentRef={(inst) => this.AddForm = inst}
        />
      </Drawer>
      <Drawer
        title={`修改站点 ${this.state.editRecord.name} `}
        placement="right"
        destroyOnClose
        keyboard={false}
        onClose={() => {
          this.setState({
            editModal: false,
            editRecord: {},
          });
        }}
        width={700}
        visible={this.state.editModal}
      >
        <AddOrEditMeter
          onClose={() => {
            this.setState({
              editModal: false,
              editRecord: {},
            });
          }}
          editRecord={this.state.editRecord}
          getConfigFunc={this.getConfigFunc}
          findChildFunc={this.findChildFunc}
          onSave={this.handleEdit}
          saveConfig={this.saveConfig}
          name={this.state.name}
          wrappedComponentRef={(inst) => this.EditForm = inst}
        />
      </Drawer>
      {/*    <Drawer
        title={`设置站点 ${this.state.editRecord.name} `}
        placement="right"
        destroyOnClose
        onClose={() => {
          this.setState({
            setModal: false,
            editRecord: {},
          });
        }}
        width={700}
        keyboard={false}
        visible={this.state.setModal}
      >
        <SiteSetting
          onClose={() => {
            this.setState({
              setModal: false,
              editRecord: {},
            });
          }}
          onSearch={()=>{
            const {
              valve_flowmeter_site: { searchParams },
            } = that.props;
            that.handleSearch(searchParams);
          }}
          editRecord={this.state.editRecord}
          name={this.state.name}
          wrappedComponentRef={(inst) => this.EditForm = inst}
        />
      </Drawer>*/}
      <Modal
        title={<BuildModalTitle visible={this.state.dataModal} modalClass="dataModal"
                                title={`${this.state.editRecord.name} 数据`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            dataModal: false,
            editRecord: {},
          });
        }}
        width={1100}
        centered
        className="dataModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.dataModal}
        footer={null}
      >
        {
          this.state.editRecord.online_status === -1 &&
          <Alert message="站点设备当前离线" type="error"/>
        }

        {
          this.state.editRecord &&
          this.state.editRecord.template === 1 &&
          <ValveData
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 2 &&
          <ValveData2
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 3 &&
          <ValveData3
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 4 &&
          <ValveData4
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 5 &&
          <ValveData5
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 6 &&
          <ValveData6
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 7 &&
          <ValveData5
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 8 &&
          <ValveData8
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 9 &&
          <ValveData9
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 35 &&
          <ValveData35
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 36 &&
          <ValveData36
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 10 &&
          <ValveData10
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 11 &&
          <ValveData11
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 12 &&
          <ValveData12
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 22 &&
          <ValveData12
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 23 &&
          <ValveData23
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 19 &&
          <ValveData19
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 13 &&
          <ValveData13
            editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 14 &&
          <ValveData14
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          this.state.editRecord.template === 15 &&
          <ValveData15
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 16||this.state.editRecord.template === 17||this.state.editRecord.template === 18) &&
          <ValveData16
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 20) &&
          <ValveData20
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 21) &&
          <ValveData21
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 24) &&
          <ValveData24
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 41) &&
          <ValveData41
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 42) &&
          <ValveData42
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        } {
        this.state.editRecord &&
        (this.state.editRecord.template === 43) &&
        <ValveData43
          editRecord={this.state.editRecord}
          name={this.state.name}        downloadHistory={this.downloadHistory}
          wrappedComponentRef={(inst) => this.dataForm = inst}
        />
      }{
        this.state.editRecord &&
        (this.state.editRecord.template === 45) &&
        <ValveData45
          editRecord={this.state.editRecord}
          name={this.state.name}        downloadHistory={this.downloadHistory}
          wrappedComponentRef={(inst) => this.dataForm = inst}
        />
      }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 25) &&
          <ValveData25
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 27) &&
          <ValveData27
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 26) &&
          <ValveData26
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 29) &&
          <ValveData29
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 40) &&
          <ValveData40
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
        {
          this.state.editRecord &&
          (this.state.editRecord.template === 44) &&
          <ValveData44
            editRecord={this.state.editRecord}
            name={this.state.name}        downloadHistory={this.downloadHistory}
            wrappedComponentRef={(inst) => this.dataForm = inst}
          />
        }
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.alarmModal} modalClass="alarmModal"
                                title={`${this.state.editRecord.name} 报警设置`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            alarmModal: false,
            editRecord: {},
          });
        }}
        width={700}
        centered
        className="alarmModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.alarmModal}
        onOk={this.handleEditAlarm}

      >
        <AlarmSetting
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.AlarmForm = inst}
        />
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.exportModal} modalClass="exportModal"
                                title={`选择导出"${this.state.editRecord.name}"时间粒度`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            exportModal: false,
          });
        }}
        centered
        className="exportModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.exportModal}
        onOk={this.handleExportModal}
        confirmLoading={this.props.global.button_loading}
      >
        <div style={{textAlign:'center'}}>
          <Radio.Group onChange={(e)=>{
            this.setState({
              granularity:e.target.value
            })
          }} value={this.state.granularity}>
            <Radio.Button value="0">原始数据</Radio.Button>
            <Radio.Button value="10">每10分钟</Radio.Button>
            <Radio.Button value="15">每15分钟</Radio.Button>
            <Radio.Button value="60">每小时</Radio.Button>
            <Radio.Button value="1440">每天</Radio.Button>
          </Radio.Group>
        </div>

      </Modal>


      <Modal
        title={<BuildModalTitle visible={this.state.editDMAModal} modalClass="editDMAModal"
                                title={`${this.state.editRecord.name} 加入DMA统计设置`}/>}
        visible={this.state.editDMAModal}
        destroyOnClose
        centered
        onOk={this.handleAddDMA}
        className="editDMAModal"
        onCancel={() => {
          this.setState({ editDMAModal: false });
        }}

      >
        <EditDMA editRecord={this.state.editRecord} wrappedComponentRef={(inst) => this.editDMAFormRef = inst}/>
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.whuploadtimeModal} modalClass="whuploadtimeModal"
                                title={`${this.state.editRecord.name} 设置上报时间`}/>}
        visible={this.state.whuploadtimeModal}
        destroyOnClose
        centered
        onOk={this.handleUploadTime}
        className="whuploadtimeModal"
        onCancel={() => {
          this.setState({ whuploadtimeModal: false });
        }}
        width={600}

      >
        <WHSetUploadtime editRecord={this.state.editRecord} wrappedComponentRef={(inst) => this.WHSetUploadtimeFormRef = inst}/>
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.WHCollectionModal} modalClass="WHCollectionModal"
                                title={`${this.state.editRecord.name} 设置采集间隔`}/>}
        visible={this.state.WHCollectionModal}
        destroyOnClose
        centered
        onOk={this.handleUploadWHCollection}
        className="WHCollectionModal"
        onCancel={() => {
          this.setState({ WHCollectionModal: false });
        }}
        width={600}

      >
        <WHCollection editRecord={this.state.editRecord} wrappedComponentRef={(inst) => this.WHCollectionFormRef = inst}/>
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.WHAlarmModal} modalClass="WHAlarmModal"
                                title={`${this.state.editRecord.name} 设置压力报警参数`}/>}
        visible={this.state.WHAlarmModal}
        destroyOnClose
        centered
        onOk={this.handleUploadWHAlarm}
        className="WHAlarmModal"
        onCancel={() => {
          this.setState({ WHAlarmModal: false });
        }}
        width={600}

      >
        <WHAlarm editRecord={this.state.editRecord} wrappedComponentRef={(inst) => this.WHAlarmFormRef = inst}/>
      </Modal>
    </div>;
  }
}

export default BasicList;
